<template>
	<view class="cloummStart">
		<view class="defultBackground">
			<appBar title="开户"></appBar>
			<view style="margin-top: 80rpx">
				<StepsBar :current="current" :steps="steps" :activeIndex="activeIndex"
					@sendCurrent="(current) => handleClick(current)"></StepsBar>
			</view>
		</view>
		<view class="w100">
			<keep-alive>
				<component :is="componentList[activeIndex - 1].page" :ref="componentList[activeIndex - 1].pageName">
				</component>
			</keep-alive>
		</view>
		<view class="mtb30 w90">
			<themeButton text="下一步" @click="setNext"></themeButton>
		</view>
	</view>
</template>

<script>
	import codeInput from "@/components/codeInput/codeInput.vue";
	import StepsBar from "@/components/StepsBar/index.vue";
	import {
		markRaw
	} from "vue";
	import accountInfo from "./current/accountInfo.vue";
	import basicInformation from "./current/basicInformation.vue";
	import settlement from "./current/settlement.vue";
	import storeInfo from "./current/storeInfo.vue";
	export default {
		components: {
			codeInput,
			StepsBar,
			accountInfo,
			basicInformation,
			settlement,
			storeInfo,
		},
		data() {
			return {
				current: 1,
				activeIndex: 2,
				steps: [{
						title: "账户信息",
						current: 1,
					},
					{
						title: "基本信息",
						current: 2,
					},
					{
						title: "结算信息",
						current: 3,
					},
					{
						title: "门店信息",
						current: 4,
					},
				],

				componentList: [{
						title: "账户信息",
						pageName: "accountInfo",
						page: markRaw(accountInfo),
					},
					{
						title: "基本信息",
						pageName: "basicInformation",
						page: markRaw(basicInformation),
					},
					{
						title: "结算信息",
						pageName: "settlement",
						page: markRaw(settlement),
					},
					{
						title: "门店信息",
						pageName: "storeInfo",
						page: markRaw(storeInfo),
					},
				],
			};
		},
		watch: {
			current(newVal) {
				this.activeIndex = newVal + 1;
			},
		},
		methods: {
			setNext() {
				// 获取当前激活组件的引用
				// const activeComponent = this.$refs[this.componentList[this.activeIndex - 1].title];
				// console.log('activeComponent:', activeComponent);
				const currentComponent = this.componentList[this.activeIndex - 1].pageName;
				// const isChecked = this.$refs[currentComponent].checkForm() ?? false;
				// if (!isChecked) return uni.$uv.toast('请完善表单')

				if (this.current < this.steps.length - 1) {
					this.current = this.current + 1;
				} else {
					// 可在此处添加提示或其他处理逻辑
					console.log("当前步骤已到达最后一步");
				}

			},
			handleClick(current) {
				this.activeIndex = current;
			},
		},
	};
</script>

<style></style>